<template>
	<view class="page pageBg" :style="{ backgroundImage: `url(${staticBg}listBj.png)`}">
		<headnav leftText="订单详情"></headnav>
		<scroll-view scroll-y="true"  class="scroll-v pageScroll">
		    <view class="pageBox">
				<view class="status block">
					<text>{{model.show_status_str}}</text>
				</view>
				<view class="d-dls" v-if="model.after_sale_status == 0">
					<view class="dl">
						<view class="dt">公司信息</view>
						<view class="dd" v-if="model.store">{{model.store.name}}</view>
					</view>
					<view class="dl">
						<view class="dt">配送方式</view>
						<view class="dd" v-if="model.delivery_type_str">{{model.delivery_type_str}}</view>
					</view>
					<view class="dl">
						<view class="dt">学生姓名</view>
						<view class="dd" v-if="model.consignee_name">{{model.consignee_name}}</view>
					</view>
					<view class="dl">
						<view class="dt">学生手机号</view>
						<view class="dd" v-if="model.consignee_phone">{{model.consignee_phone}}</view>
					</view>
					<view class="dl">
						<view class="dt">学号</view>
						<view class="dd" v-if="model.consignee_phone">{{userInfo.no}}</view>
					</view>
				</view>
				<view class="d-dls" v-if="model.after_sale_status == 0">
					<view class="dl">
						<view class="dt">学校</view>
						<view class="dd" v-if="user.school_name">{{user.school_name}}</view>
					</view>
					<view class="dl">
						<view class="dt">学院</view>
						<view class="dd" v-if="user.school_name">{{user.school_college_name}}</view>
					</view>
					<view class="dl">
						<view class="dt">专业</view>
						<view class="dd" v-if="user.school_profession_name">{{user.school_profession_name}}</view>
					</view>
					<view class="dl">
						<view class="dt">班级</view>
						<view class="dd" v-if="user.class_name">{{user.class_name}}</view>
					</view>
				</view>
				<!-- <goodsItem :model='model' :goods="goods" :order_status='order_status' :is_pre='is_pre'></goodsItem> -->
				<view class="back-name block" style="padding: 0;">
					<view class="back-name-item">
						<view class="b-title m-title" v-if="model.activity">
							{{model.activity.alias}}
						</view> 
						<view class="padding">
							   <view class="b-num">
									<text class="num marR colorh">共 {{goodNum}} 件 </text>
									<text class="priceTotal colorh">
										<text v-show="order_status == 0">待付款</text>
										<text v-show="order_status != 0">总金额</text>
										<text style="margin-left: 20rpx;" :class="{red:order_status == 0}">
											¥ {{totalPrice}}
										</text>
									</text>
							   </view>
					    </view>
					</view>
				</view>
				<view class="back-name block" >
					<view class="back-name-item" v-for="(item,index) in goods" :key="index">
						<!-- <view class="back-btn" @tap='test'>
							申请售后
						</view> -->
					
						
							<view class="b-title">
								<!-- <view class="checkBox" @tap="checkBox(item)">
									<image src="/static/img/checkedIcon.png" v-show="item.is_selected == 1" class="checkIcon" mode=""></image>
									<image src="/static/img/checkIcon.png"  v-show="item.is_selected != 1"class="checkIcon" mode=""></image>
								</view> -->
								{{item.goods_name}}
							</view>
							<view class="b-num">
								<text class="colorh marR"> 
									<text >售价</text>
									<text :class="{red:order_status == 0}" style="margin-left: 20rpx;">¥ {{item.goods_sale_price}}</text></text>
							  </text>
							</view>
						     <view class="uNumberBox" v-if="order_status == 0">
							<!-- 	<u-number-box  :value="item.quantity" :disabledInput="true" 
									:min="1" :max="99" bgColor="#f3f4f6" :longPress="false"
									@change="countChange($event,index)" /> -->
									× {{item.quantity}}
							</view>
							<view class="uNumberBox" v-if="order_status != 0">
								× {{item.quantity}}
							</view>
					</view>
				</view>
				<view class="dlsleft">
					<view class="dl" v-if="model.no">
						订单编号：{{model.no}}
					</view>
					<view class="dl" v-if="model.show_status_str">
						订单状态：{{model.show_status_str}}
					</view>
					<view class="dl" v-if="model.created_at">
						下单时间：{{model.created_at}}
					</view>
					<view class="dl" v-if="model.pay_at">
						<text v-if="is_pre == 0">付款时间：</text>
						<text v-if="is_pre == 1">预付款时间：</text>
						{{model.pay_at}}
					</view>
					<view class="dl" v-if="model.balance_payment_time">
						支付尾款时间：{{getTime(model.balance_payment_time)}}
					</view>
					<view class="dl" v-if="model.shipped_at">
						发货时间：{{model.shipped_at}}
					</view>
					<view class="dl" v-if="model.received_at">
						收货时间：{{model.received_at}}
					</view>
				</view>
			<!-- 	<view class="bottomBtn">
					<view class="bt bt-a">重新申请</view>
				</view> -->
			</view>
		</scroll-view>
	<!-- 	<view class="totelBotttom">
			<view class="btnBox">
				<view class="d-btn">取消订单</view>
				<view class="d-btn btn-a">立即支付</view>
			</view>
		</view> -->
		<view class="totelBotttom" v-if="model.btn && model.btn.length > 1">
		   <!-- <view class="checkAll" @tap="checkAllbtn">
				<image src="/static/img/checkIcon.png" class="checkIcon" mode="" v-show="!allcheck"></image>
				<image src="/static/img/checkedIcon.png" class="checkIcon" mode=""  v-show="allcheck"></image>
		   	     <text>全选</text>
		   </view> -->
			<view class="rightWrap">
				<view class="o-btn" :class="{active:item.k == 2 || item.k == 5}"  @tap="btnEVent(item.k,model)" v-for="(item,index) in model.btn" v-if="item.k != 1 && item.k != 8 && item.k != 3" :key="index">{{item.v}}</view>
			</view>
		</view>	
	</view>
</template>
<!-- const BTN_PAY = 2;
    const BTN_CANCEL = 3;
    const BTN_REFUND = 4;
    const BTN_RECEIPT = 5;
    const BTN_FINISH = 6;
    const BTN_DELETE = 7;
    const BTN_CUSTOMER = 8;
    const BTN_REMAINING = 9;
    const BTN_LIST = [
        self::BTN_VIEW => '详情',
        self::BTN_PAY => '去支付',
        self::BTN_CANCEL => '取消订单',
        self::BTN_REFUND => '申请退款',
        self::BTN_RECEIPT => '确认收货',
        self::BTN_FINISH => '完成订单',
        self::BTN_DELETE => '删除订单',
        self::BTN_CUSTOMER => '联系客服',
        self::BTN_REMAINING => '支付尾款', -->
<script>
	import { orderDetials, getOrder, getAfterOrder, paycancel, receipTOrder, delTOrder, computTOrder, changeNum } from '@/api/goods.js'
	import { payCreatOrder,  payformOrder } from '@/api/pay.js'
	import { mapGetters } from "vuex";
	import  goodsItem from './components/goodsItem.vue'
	export default {
		components:{
			goodsItem
		},
		data() { 
			return {
				id:'',
				goods:[],
				model:{},
				order_status:-1,
				is_pre:'',
				totalPrice:0,
				allcheck:true
			}
		},
		onLoad() {
			this.id = this.$Route.query.id
			// console.log(this.id);
			// console.log(this.user);
			this.OrderDetials();
		},
		computed:{
		   ...mapGetters(['userInfo']),
		   goodNum(){
			   if(this.goods.length == 0) {
				   return 0
			   } else {
				  let num = 0;
				  this.goods.forEach((item) => {
					  num += item.quantity
				  })
				  return num
			   }
		   }
 		},
		methods: {
			btnEVent(id,model) {
				console.log(id);
				switch(id)
					{
						case 1:
							// this.$Router.push('/pages/orderDetail/orderDetail?id=' + item.id)
							break;
						case 4:
							 let parms;
							 if(this.order_status == 1) {
								 parms = 1;
							 } else {
								  parms = 2;
							 }
							this.$Router.push('/pages/afterInput/afterInput?id=' + model.id +'&select=' + parms)
							break;
						case 5:			
							this.ReceipTOrder(this.model.id)			
							break;
						case 2:
							payformOrder(this.model.id);
							break;
						case 3:
							this.Paycancel(this.model.id)
							break;
						case 6:
							// console.log('完成订单');
							this.ComputTOrder(this.model.id)
							break;
						  case 7: 
							this.DelTOrder(this.model.id)
							break;
						 case 9: 
							this.topay();
							break;
						case 10:
							payformOrder(this.item.payment_pay.order_id);
							break;	
						case 11:
							this.$Router.push('/pages/afterDetial/afterDetial?id=' + this.model.last_after_sale.id)
							break;
						default:
							break;
					}
			},
			topay() {
				let goods_ids = {}
				// let is_selectGoods = this.goods.filter(item  => item.is_selected  == 1);
				// console.log(is_selectGoods);
				this.goods.forEach((item) => {
					goods_ids[item.goods_id] = item.quantity
				})
				// console.log(item.order_goods);
				// console.log(goods_ids);
				const post_data = {
					student_id:this.model.payment_pay.student_id,
					activity_id:this.model.payment_pay.activity_id,
					goods_ids:JSON.stringify(goods_ids),
					master_order_id:this.model.id
				}
				payCreatOrder(post_data);
				//console.log(post_data);
			},
			async Paycancel(id) {
			   const res = await paycancel({id:id});
			   if(res) {	
				   uni.showToast({
				   	  title:'操作成功',
				   	  icon:'none'
				   })
				   uni.navigateBack();
			   }
			},
			async DelTOrder(id) {
			  const res = await delTOrder({id:id});
			  // console.log(res);
			  if(res) {
				  this.toast('操作成功');
				  uni.navigateBack();
			  }
			},
			async ComputTOrder(id) {
				 const res = await computTOrder({id:id});
				 if(res) {
					 uni.showToast({
					 	title:'操作成功',
						icon:'none'
					 })
					 uni.navigateBack();
				 }
			},
			async  OrderDetials () {
				const { data } = await orderDetials({id:this.id}) 
				if(data) {
					const array = data.item.data;
					array.forEach(item => {
						console.log(item);
						item.is_selected = 1;
						item.is_required = 0;
					    // item.num = 1;
					})
					this.goods = array;
					
					
					// console.log();
					this.model = data.model;
					this.is_pre = this.model.prepayment_type;
					this.order_status = this.model.show_status;
					// console.log('is_pre',this.is_pre);
					// console.log('order_status',this.order_status);
					// console.log('model',this.model);
					console.log('model',this.model);
					console.log('this.goods',this.goods);
					this.reudcePrice();
				}
				
			},
			async ReceipTOrder(id) {
				 const res = await receipTOrder({id:id});
				 if(res) {
					 uni.showToast({
						title:'操作成功',
						icon:'none'
					 })
					uni.navigateBack()
				 }
			},
			scrolltolower() {
				
			},
			checkBox(item) {
				if(item.is_required == 0) {
					item.is_selected = !item.is_selected;
					this.$nextTick(() => {
						const array = this.goods.filter(item  => item.is_selected  == 1);
						if(array.length == this.goods.length) {
							this.allcheck = true
						}
						if(array.length == 0) {
							this.allcheck = false
						}
	
						this.reudcePrice();
					})
				}
			},
			countChange(e,type) {
							// console.log(type);
				var value = Number(e.value);
				// const newPrice = value * this.goods[type].dan_prepayment;
				// this.$set(this.goods[type],'prepayment',newPrice.toFixed(2));
				const id = this.goods[type].id;
				
				
				
				this.$nextTick(async () => {
					this.$set(this.goods[type],'quantity',value);
					this.reudcePrice();
					let array = []
					let obj = {};
					this.goods.forEach(item => {
						
						obj[item.id] = item.quantity
						// array.push(obj)
						// let str = '';
						// str += item.id + ':' + item.quantity
						// array.push(str)
					})
					// console.log(array.join(","));
					const res = await changeNum({
						id:this.model.id,
						// data:"[" + array.join(",") + "]"
						data:JSON.stringify(obj)
					});
					console.log(res);
				})
			},	
			reudcePrice(){
				const filtered = this.goods.filter(item  => item.is_selected  == 1);
				if(filtered.length == 0) {
					this.totalPrice = 0;
				} else {
					const prices = filtered.map(item => item.goods_sale_price * item.quantity);
					//console.log(prices);
					const sum = prices.reduce((acc,  curr) => Number(acc) + Number(curr), 0);
					this.totalPrice = sum.toFixed(2);
				}
			},
			togleOpen() {
				this.open = !this.open;
			},
			gochangeSchool() {
				uni.navigateTo({
					url:'/pages/changeSchool/changeSchool'
				})
			},
			change(e) {
				this.swiper.current = e.detail.current;
			},
			checkAllbtn() {
				console.log(123);
				if(!this.allcheck) {
					this.allcheck = true;
					this.goods.forEach((item) => {
						if(!item.is_required) {
							this.$set(item,'is_selected',true)
						}
					})
				} else {
					this.allcheck = false;
					this.goods.forEach((item) => {
						if(!item.is_required) {
							this.$set(item,'is_selected',false)
						}
					})
				}
				
				
				this.$nextTick(() => {
					const array = this.goods.filter(item  => item.is_selected  == 1);
					if(array.length == this.goods.length) {
						this.allcheck = true
					}
					this.reudcePrice();
				})
			},
			getTime(timestamp) {
				//console.log(timestamp);
				const date = new Date(timestamp * 1000);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				const hours = ('0' + date.getHours()).slice(-2);
				const minutes = ('0' + date.getMinutes()).slice(-2);
				const seconds = ('0' + date.getSeconds()).slice(-2);
				const formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
				return formattedDate;
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/dls.scss";
	@import "@/static/css/detial.scss";
	.page {
		background-color: #f5f8fa;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.red {
		color:#ff4f4f;
	}
	.colorh {
		color:#a6a6a6;
	}
	.pageBox {
		padding-bottom: 130rpx;
		.status {
			height: 102rpx;
			// display: flex;
			padding-top: 14rpx;
			font-size: 36rpx;
			color:#3c84f4;
			font-weight: bold;
			padding-left: 32rpx;
			.red {
				color:#ff4f4f;
			
			}
			
		}
	}
	
	
	.bottomBtn {
		padding-top: 55rpx;
		@include bt-s-1();
	}
	
	.back-name {
		background-color: #fff;
		font-size: 30rpx;
		line-height: 40rpx;
		padding: 36rpx 35rpx 4rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		    &.after {
				background-color: #fff;
			    padding: 0 30rpx;
					 &:last-of-type {
							  margin-bottom: 0;
						  }
						  .head {
							height: 72rpx;
							width: 100%;
							display: flex;
							padding-top: 30rpx;
							position: relative;
							.h-icon {
								width: 35rpx;
								height: 35rpx;
								margin-right: 20rpx;
							}
							.h-icon2 {
								margin-left: 20rpx;
								width: 14rpx;
								height: 22rpx;
								top: 2rpx;
								position: relative;
							}
							.status {
								color:#ff4f4f;
								position: absolute;
								top:26rpx;
								right: 0;
								font-size: 29rpx;
							}
						  }
						  .body {
							  padding: 15rpx 0 16rpx;
							  border-bottom: 1px solid #f5f5f5;
							  .name {
								  color: #333333;
								  font-size: 32rpx;
								  line-height:48rpx;
								  margin-bottom: 15rpx;
							  }
							  .f-name {
								  color:#a6a6a6;
								  font-size: 28rpx;
								  margin-bottom: 8rpx;
								  .price {
									  color:#ff4f4f;
								  }
							  }
							  .af-info {
								  background-color: #f7f7f7;
								  padding: 32rpx 32rpx 22rpx; //10
								  line-height: 40rpx;
								  border-radius: 20rpx;
								  margin-bottom: 10rpx;
								  .af-name {
									  font-size: 28rpx;
									  margin-bottom: 5rpx;
								  }
								  .af-num {
									  font-size: 26rpx;
									  color:#a6a6a6;
									  .priceBox {
										  margin-left: 15rpx;
									  }
									  .price {
										  color:#ff4f4f;	
									  }
								  }
							  }
						  }
						  .foot {
							  width: 100%;
							  height: 118rpx;
							  display: flex;
							  justify-content: space-between;
							  align-items: center;
							  .left, .right {
								  .left-text {
									  margin-right: 20rpx;
									  font-size: 29rpx;
								  }
								  display: flex;
							  }
						  }
				}
			
		   .back-name-item {
			margin-bottom: 30rpx;
			// &:last-of-type {
			// 	margin-bottom: 0;
			// }
			position: relative;
			.uNumberBox {
				position: absolute;
				right: 3rpx;
				bottom: -8rpx;
			}
			.back-btn {
				width: 155rpx;
				height: 64rpx;
				background-color: #ffebeb;
				color:#ff4f4f;
				border-radius: 18rpx;
				position: absolute;
				right: 0;
				top:75rpx;
				font-size: 26rpx;
				z-index: 9999999;
				@include center;
			}
		}
		.b-title {
			margin-bottom: 10rpx;
			display: flex;
			&.m-title {
				background-color:#388cff;
				color:#fff;
		        box-shadow:0px 1px 10px #388cff;
				padding: 29rpx 34rpx;
			}
		}
		.padding {
			padding: 10rpx 35rpx 4rpx;
			
		}
		.b-num {
			height: 56rpx;
			line-height: 56rpx;
			font-size: 29rpx;
			.marR{
				margin-right: 30rpx;
			}
			
		    position: relative;
			.num {
				
				
			}
			.posR {
				position: absolute;
				right: 0;
				top:2rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
